<template>
  <h1>商品添加</h1>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="商品名" prop="proname">
      <el-input v-model="ruleForm.proname" />
    </el-form-item>
    <el-form-item label="商品价格" prop="originprice">
      <el-input v-model="ruleForm.originprice" />
    </el-form-item>

    <el-form-item label="商品详情" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>

    <el-form-item label="商品品牌" prop="brand">
      <el-input v-model="ruleForm.brand" />
    </el-form-item>

    <el-form-item label="商品分类" prop="category">
      <el-input v-model="ruleForm.category" />
    </el-form-item>

    <el-form-item label="图片">
      <el-upload
        :multiple="true"
        v-model:file-list="fileList"
        action="http://localhost:3001/admin/file/upload"
        :headers="{ token: token }"
        name="img"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
      >
        <!-- :on-remove="handleRemove" -->
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 添加 </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  ElMessage,
  type ComponentSize,
  type FormInstance,
  type FormRules,
  type UploadFile,
} from 'element-plus'
interface RuleForm {
  proname: string
  originprice: string
  desc: string
  brand: string
  category: string
  img1: string
  img2: string
  img3: string
  img4: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  proname: '',
  originprice: '',
  desc: '',
  brand: '',
  category: '',
  img1: '',
  img2: '',
  img3: '',
  img4: '',
})

const rules = reactive<FormRules<RuleForm>>({
  proname: [{ required: true, message: '请输入商品名', trigger: 'blur' }],
  originprice: [{ required: true, message: '请输入商品名', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入详情', trigger: 'blur' }],
  brand: [{ required: true, message: '请输入商品品牌', trigger: 'blur' }],
  category: [{ required: true, message: '请输入商品分类', trigger: 'blur' }],
})

/**
 * 图片上传
 */
import type { UploadProps } from 'element-plus'
import { addProReq } from '../api/product'
const token = ref(localStorage.getItem('xx-mall-admin-token'))

const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 上传图片
// function handleUpload(res: string, file: UploadFile) {
//   // console.log(res.fileUrl)
//   // console.log('file', file);
// }
// 删除图片
// const handleRemove = (res: string, file: UploadFile) => {

// }
// 图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  const imgArr = fileList.value.map((item) => item.response.fileUrl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      addProReq(
        ruleForm.proname,
        ruleForm.originprice,
        ruleForm.desc,
        ruleForm.brand,
        ruleForm.category,
        imgArr,
      ).then((res) => {
        if (res.data.code === 200) {
          resetForm(formEl)
          ElMessage.success('添加成功')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  fileList.value = []
}
</script>

<style scoped lang="scss"></style>
